<template>
  <div class="confirm-box">
    <div class="mask-div" v-if="confirmMessage.is_show">
      <div class="mask-bg" @click="confirmMessage.is_show = false"></div>
      <div class="content">
        <p class="title">{{confirmMessage.title}}</p>
        <p class="tip">{{confirmMessage.tip}}</p>
        <div class="btn">
          <span class="left" @click="start">
            {{confirmMessage.left}}
          </span>
          <span class="right" @click="play">
            {{confirmMessage.right}}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    components: {
    },
    props: {
      'confirmMessage': {
        type: Object,
        required: true,
        default: function () {
          let message = {
            title: '是否继续上次未答完试题',
            tip: '您上次选择了成年答到第18题，是否继续上次剩下的题目',
            btn: '去开通',
            is_show: false,
            left: '重新开始',
            right: '继续'
          }
          return message
        }
      },
    },
    data () {
      return {
        is_show: false
      }
    },
    created () {
    },
    methods: {
      start() {
        localStorage.removeItem("timu_num");
        this.$router.push({path: './examStart', query: {article_type: this.confirmMessage.type}});
      },
      play() {
        this.$router.push({path: './examStart', query: {article_type: this.confirmMessage.type, timu_num: localStorage.getItem("timu_num")}});
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .confirm-box
    .content
      width 78%
      left 11%
      background-color #fff
      border-radius .3rem
      text-align center
      top 15.4rem
      .title
        font-size 1.7rem
        line-height 1.7rem
        height 1.7rem
        color #333
        font-weight 500
        margin-top 2.2rem
        margin-bottom 2.5rem
      .tip
        font-size 1.3rem
        line-height 2rem
        margin 0 3rem
      .btn
        height 5rem
        line-height 5rem
        display block
        width 100%
        font-size 1.5rem
        text-align center
        border-top 1px solid #e6e6e6
        margin-top 2.5rem
        overflow hidden
        span
          width 50%
        .left
          float left
          color #666666
          position relative
          &::after
            content ''
            position absolute
            right 0
            height 60%
            top 20%
            border-right 1px solid #E6E6E6
        .right
          float left
          color #43A047
</style>
